<template>
  <div class="catagory">
    <van-sticky :offset-top="0">
      <van-search
        show-action
        :clearable="false"
        placeholder="请输入搜索关键词"
        @click-input="toSearch"
      >
        <template #action>
          <div>搜索</div>
        </template>
      </van-search>
    </van-sticky>
    <van-tabs
      offset-top="54"
      v-model:active="active"
      animated
      sticky
      @click-tab="onClickTab"
    >
      <van-tab v-for="index in optionArr" :title="index">
        <!-- <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          :offset="10"
          ref="load"
          style="width: 100%"
        > -->
        <goods :shop-list="shopList"></goods>
        <!-- </van-list> -->
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import Goods from "@/components/Goods.vue";
import { getCatogory } from "@/api/shop";
import { ref, onMounted } from "vue";
const optionArr = [
  "推荐",
  "电子",
  "鞋类",
  "女装",
  "潮服",
  "包袋",
  "手表",
  "美妆",
  "生活",
  "食饮",
];
const active = ref(0);
const router = useRouter();
const toSearch = () => {
  router.push("/search");
};
const shopList = ref([]);
const page = {
  page: 1,
  pageSize: 10,
};
const count = ref(0);
const getList = async (title) => {
  const { data } = await getCatogory({ ...page, tag: title });
  shopList.value = data.res;
};
const onClickTab = async ({ title }) => {
  await getList(title);
  localStorage.setItem("tag", title);
  localStorage.setItem("tagCurList", JSON.stringify(shopList.value));
  console.log(title);
};
// const onLoad = async () => {
//   // if (loading.value || finished.value) return;
//   setTimeout(() => {
//     getList();
//   }, 2000);
// };
onMounted(() => {
  if (localStorage.getItem("tag")) {
    active.value = optionArr.indexOf(localStorage.getItem("tag"));
    shopList.value = JSON.parse(localStorage.getItem("tagCurList"));
    localStorage.removeItem("tag");
    localStorage.removeItem("tagCurList");
  } else {
    getList("推荐");
  }
});
</script>
<style lang="scss" scoped>
.catagory {
  height: 100%;
  background-color: #f8f8f8;
  margin-bottom: 50px;
}
</style>
